@import 'splitpanes/dist/splitpanes.css';

/* Splitpanes */
.splitpanes__splitter {
  position: relative;
}
.splitpanes__splitter:before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  transition: opacity 0.4s ease;
  z-index: 1;
}
.splitpanes__splitter:hover:before {
  background: #8881;
  opacity: 1;
}
.splitpanes--vertical > .splitpanes__splitter {
  min-width: 0 !important;
  width: 0 !important;
  /* @apply border-r border-base; */
}
.splitpanes--horizontal > .splitpanes__splitter {
  min-height: 0 !important;
  height: 0 !important;
  --uno: border-t border-base;
}
.splitpanes--vertical > .splitpanes__splitter:before {
  left: -5px;
  right: -4px;
  height: 100%;
}
.splitpanes--horizontal > .splitpanes__splitter:before {
  top: -5px;
  bottom: -4px;
  width: 100%;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

.no-scrollbar {
  /* Support Firefox */
  scrollbar-width: none;
}

/* Shikiji */
/* refer: https://shikiji.netlify.app/guide/dual-themes#class-based-dark-mode */
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
